<template>
  <div class="addNews">
    <div class="addNews__top"><nuxt-link style="color: #409eff;padding:8px;" to='/news'>返回</nuxt-link></div>
    <!-- <el-header>
      <img src="~/static/images/button_return_default.png" alt="" class="fr">
    </el-header> -->
    <div>
      <el-form :model="addNewsForm" ref="addNewsForm" label-width="100px" class="demo-ruleForm" label-position="left">
        <el-form-item label="新闻标题" prop="title" :rules="[
            { required: true, message: '请输入标题'},
          ]">
          <el-input type="text" v-model="addNewsForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻分类" prop="cur_sel_sort" :rules="[
            { required: true, message: '请选择分类'},
          ]">
          <el-select clearable style="width: 200px" class="filter-item" v-model="addNewsForm.cur_sel_sort" placeholder="选择分类">
            <el-option v-for="item in typeList" :key="item.code" :label="item.text" :value="item.code">
            </el-option>
          </el-select>  
        </el-form-item>
        <el-form-item label="新闻内容" prop="new_content" :rules="[
            { required: true, message: '请输入内容'},
          ]">   
          <div ref="editor" style="text-align:left;"></div>
        </el-form-item>
        <el-button type="primary" round class="release " @click.native="release" v-if="$route.params.id=='0'">发布</el-button>
        <el-button type="primary" round class="release " @click.native="update" v-else>修改</el-button>
      </el-form>
    </div>

  </div>
</template>
<style lang="scss" scoped>
.addNews {
  background: #f5f9fe;
  padding: 0 50px;
  &__top {
    line-height:50px;
    text-align:right;
  }
  & /deep/ {
    .el-input__inner {
      width: 200px;
    }
    .w-e-text-container {
      background: #fff;
    }
    .release {
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
}
</style>
<script>
if (process.browser) {
  var wangeditor = require("wangeditor");
}
import { getNewsTypeList, addEcpNews, getEcpNews ,updateEcpNews} from "~/api/";
export default {
  data() {
    return {
      addNewsForm: {
        title: "",
        cur_sel_sort: "",
        new_content: "",
      }
    };
  },
  async beforeMount() {
    console.log(this.$route.params.id)
  },
  async asyncData({ app }) {
    try {
      const res = await getNewsTypeList(app);
      if (res.code == "0") return { typeList: res.data.typeList };
      return { typeList: [], message: res.message };
    } catch (error) {
      console.error(`获取新闻类型列表接口错误，错误信息${error}`);
    }
  },
  methods: {
    /*release() {
      this.$refs["addNewsForm"].validate(async valid => {
        if (!valid) return;
        console.log(this.addNewsForm);
        const res = await addEcpNews(
          this,
          this.addNewsForm.title,
          this.addNewsForm.cur_sel_sort,
          this.addNewsForm.new_content
        );
        //成功处理
        if (res.code == "0") {
          this.$message.success("添加成功");
          this.$router.replace("/news");
          return;
        }
        //失败处理
        this.$msgbox({
          title: "提示",
          message: res.message,
          type: "error"
        });
      });
    },*/
    async release(){//自己写的接口
       //第一步验证表单
       this.$refs["addNewsForm"].validate(async valid=>{
        if(!valid) return;
        const res= await addEcpNews(this, this.addNewsForm.title, this.addNewsForm.cur_sel_sort, this.addNewsForm.new_content);
        if(res.code==='0'){
          this.$message.success('添加新闻成功');
          this.$router.push('/news');//也可以写成 this.$router.replace('/news');
        }else{
          this.$message.error(res.message);
        }
       })

    },
    async update(){
      this.$refs["addNewsForm"].validate(async valid => {
        if (!valid) return;
        const res = await updateEcpNews(
          this,
          this.$route.params.id,
          this.addNewsForm.title,
          this.addNewsForm.cur_sel_sort,
          this.addNewsForm.new_content
        );
        //成功处理
        if (res.code == "0") {
          this.$message.success("修改成功");
          this.$router.replace("/news");
          return;
        }
        //失败处理
        this.$msgbox({
          title: "提示",
          message: res.message,
          type: "error"
        });
      });
    }
  },

  async mounted() {
    var editor = new wangeditor(this.$refs.editor);
    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

    editor.customConfig.zIndex = 100;
    editor.customConfig.height = "600px";
    editor.customConfig.onchange = html => {
      this.addNewsForm.new_content = html;
    };
    editor.create();
    if (this.$route.params.id == '0') return
    const res = await getEcpNews(this, this.$route.params.id);
    if (res.code === "0") {
        this.addNewsForm.title=res.data.ecpNewsInfo.title
        this.addNewsForm.cur_sel_sort=res.data.ecpNewsInfo.type
        this.addNewsForm.new_content=res.data.ecpNewsInfo.content
        editor.txt.html(res.data.ecpNewsInfo.content)
    } else {
      this.$message.error(res.message);
    }
  }
};
</script>


